import React, { Component } from 'react'
import { Tabs, message } from 'antd'
import FileSaver from 'file-saver'

import request from '@/Utils/fecth'
import { address } from '@/Utils/apiConfig'
import { checkPermission } from '@/components/AuthComponent/utils'
// import BaseInfo from './components/BaseInfo/BaseInfo'
import Peer from './components/PeerManagement/index'
import Certificate from './components/Certificate/index'
import './index.less'

import moment from 'moment'
const { TabPane } = Tabs

export default class OrganizationManagement extends Component {
  constructor(props) {
    super(props)
    this.certificate =
      <div style={{ height: '100%', margin: '0 24px', background: '#fff' }}>
        <div style={{ padding: '24px 32px 32px 32px' }}>
          证书管理
        </div>
      </div>

    const tabsList = [
      {
        id: '0',
        authKey: 'org-peer',
        tabContent: () => <Peer detail={this.state.detail} id={this.props.match.params.id} history={props.history} />,
        tabName: '节点管理',
      },
      {
        id: '1',
        authKey: 'org-certificate',
        tabContent: () => <Certificate id={this.props.match.params.id} />,
        tabName: '证书管理',
      },
    ].filter(v => checkPermission(v.authKey))

    this.state = {
      isLoading: true,
      detail: {},
      defaultActiveKey: props.history.location.state || (tabsList[0] || {}).id || '0',
      tabsList,
    }
  }
  async componentDidMount() {
    let res = await request().get(address.organizationManagement.organizationDetail.format({ id: this.props.match.params.id }))
    this.setState({
      isLoading: false,
    })
    if (res && res.status === 200 && res.data && res.data.length) {
      this.setState({
        detail: res.data[0],
      })
    }
  }

  onChange = (value) => {
    this.props.history.replace({
      pathname: this.props.location.pathname,
      state: value,
    })
  }

  downloadFn = (value) => {
    if (!value) {
      message.error('获取组织TLSCA证书失败')
      return
    }
    var blob = new Blob([value], { type: 'application/octet-stream' })
    FileSaver.saveAs(blob, 'TLSCA.pem')
  }

  render() {
    let { detail, isLoading, tabsList } = this.state
    const elementList = [
      {
        label: '域名',
        value: detail.domain,
      },
      {
        label: '创建ID',
        value: detail.userName,
      }, {
        label: 'MSPID',
        value: detail.name + 'MSP',
      },
      {
        label: '节点数',
        value: detail.nodeNum,
      },
      {
        label: '组织类型',
        value: detail.type,
      },
      {
        label: '所属联盟',
        value: detail.consortiumName,
      },
      {
        label: '所属通道',
        value: detail.channels ? detail.channels.join('、') : '暂无通道',
      },
      {
        label: '创建时间',
        value: detail.createTime ? moment(detail.createTime).format('YYYY.MM.DD HH:mm:ss') : '',
      },
      {
        label: '描述',
        value: detail.description,
      },
      {
        label: '组织TLSCA证书',
        click: true,
        value: detail.tlsca,
      },
    ]
    if (detail.type === 'orderer') { // orderer组织不展示证书管理
      tabsList = tabsList.filter(v => v.tabName !== '证书管理')
    }
    return (
      <div className="org-info common">
        <div className="info-box">
          {
            elementList.map((element, index) => {
              return (
                <div key={index} className="info-item">
                  <div className="label">{element.label}</div>
                  {
                    element.click ? <div className="item download" onClick={() => { this.downloadFn(element.value) }}>下载</div>
                      : <div className="item" title={element.value}>{element.value || '暂无'}</div>
                  }
                </div>
              )
            })
          }
        </div>
        <div className="tabs">
          <Tabs destroyInactiveTabPane defaultActiveKey={this.state.defaultActiveKey} onChange={(value) => this.onChange(value)}>
            {
              tabsList.map((element, index) => {
                return (
                  <TabPane tab={element.tabName} key={index}>
                    {isLoading ? null : element.tabContent(this.state.detail)}
                  </TabPane>
                )
              })
            }
          </Tabs>
        </div>
      </div>
    )
  }
}
